<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
    <title>密码验证</title>
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon" />
    <style>
        #pass,
        #repass {
            border-style: solid;
            border-width: 1px;
            border-radius: 2px;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <form action="https://www.baidu.com">
            <div class="form-group">
                <label for="pass">密码</label>
                <input type="text" name="pass" id="pass" placeholder="请输入密码" />
                <span>*</span>
            </div>
            <div class="form-group">
                <label for="repass">重复密码</label>
                <input type="password" name="repass" id="repass" placeholder="请再次输入密码" />
                <span>*</span>
            </div>
            <input type="submit">
        </form>
    </div>
</body>
<script>
    const log = console.log
    let form = document.querySelector("form")
    let pass = document.querySelector("#pass")
    pass.onblur = validPass
    pass.onfocus = function () {
        this.nextElementSibling.innerHTML = ''
        this.style.borderColor = 'black'
    }

    let repass = document.querySelector("#repass")
    repass.onblur = validRepass
    repass.onfocus = function () {
        this.nextElementSibling.innerHTML = ''
        this.style.borderColor = 'black'
    }

    form.onsubmit = (e) => {
        //数学与 0&0=0  0&1=0 1&1=1
        let flag = validPass() & validRepass()
        return flag > 0
    }

    /**
     * 验证密码 6-12数字，非空
     * @date 2020-10-07
     * @returns {any}
     */
    function validPass() {
        let v = pass.value
        let span = pass.nextElementSibling
        span.innerHTML = ""
        span.style.color = "red"
        if (v === "") {
            span.innerHTML = "密码不能为空"
            pass.style.borderColor = "red"
            return false
        }
        if (v.length > 12 || v.length < 6) {
            span.innerHTML = "密码长度6-12位"
            pass.style.borderColor = "red"
            return false
        }
        let str = '0123456789'
        for (let i = 0; i < v.length; i++) {
            let st = v[i]
            if (str.indexOf(st) === -1) {
                span.innerHTML = "密码必须是数字"
                pass.style.borderColor = "red"
                return false
            }
        }
        span.innerHTML = "密码正确"
        span.style.color = "green"
        pass.style.borderColor = "green"
        return true
    }

    /**
     * 验证重复密码 6-12数字，非空和密码一致
     * @date 2020-10-07
     * @returns {any}
     */
    function validRepass() {
        let flag = validPass()
        let span = repass.nextElementSibling
        span.innerHTML = ""
        span.style.color = 'red'
        if (!flag) {
            span.innerHTML = "请正确输入密码"
            repass.style.borderColor = "red"
            return false
        }
        let v = repass.value
        let v1 = pass.value
        if (v !== v1) {
            span.innerHTML = "重复密码输入不正确"
            repass.style.borderColor = "red"
            return false
        }
        span.innerHTML = "重复密码正确"
        span.style.color = "green"
        repass.style.borderColor = "green"
        return true
    }
</script>

</html>